import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import { AtGrid } from "taro-ui"
import Taro from '@tarojs/taro'
import UserDetail, { User } from './userDetail'
import AuthDetail from './authDetail'
import styles from './index.module.less'
import { UserService } from '../../api/user'
import { useRequest } from 'ahooks'

const initUser: User = {
  picture: "",
  telephone: "",
  userTypeValue: "",
  username: "",
}
const My: React.FC<{}> = () => {
  const [ShowUserInfo, setShowUserInfo] = useState(false)
  const [ShowAuth, setShowAuth] = useState(false)
  const GridData = [
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
      value: '账户信息',
      key: 'userInfo',
    },
    {
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '我的帖子',
      key: 'myBark'
    },
    {
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '发布帖子',
      key: 'createBark'
    },
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
      value: '我的招聘',
      key: 'myRecruit'
    },
    {
      image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
      value: '发布招聘',
      key: 'createRecruit'
    },
    {
      image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
      value: '手机授权',
      key: 'auth'
    },
  ]
  const goNew = (key: string) => {
    switch (key) {
      case 'userInfo':
        setShowUserInfo(true)
        break
      case 'myBark':
        Taro.navigateTo({
          url: '/pages/my/myBark?type=bark',
        })
        Taro.setNavigationBarTitle({
          title: "我的帖子"
        })
        break
      case 'myRecruit':
        Taro.navigateTo({
          url: '/pages/my/myBark?type=recruit',
        })
        Taro.setNavigationBarTitle({
          title: "我的招聘"
        })
        break
      case 'createBark':
        Taro.navigateTo({
          url: '/pages/my/createBark?type=bark',
        })
        Taro.setNavigationBarTitle({
          title: "发布帖子"
        })
        break
      case 'createRecruit':
        Taro.navigateTo({
          url: '/pages/my/createBark?type=recruit',
        })
        Taro.setNavigationBarTitle({
          title: "发布招聘"
        })
        break
      case 'auth':
        setShowAuth(true)
        break
    }
  }

  const [user, setUser] = useState(initUser)
  const userinfo = useRequest(UserService.info, {
    manual: true,
    onSuccess: (res) => {
      // @ts-ignore
      setUser(res)
    }
  })
  useEffect(() => {
    userinfo.run()

  }, [user.telephone])
  return (
    // @ts-ignore
    <View className={styles.MyBarks}>
      <AtGrid onClick={(w) => goNew(w.key)} data={GridData}></AtGrid>
      <UserDetail isShow={ShowUserInfo} onClose={() => setShowUserInfo(false)} user={user}></UserDetail>
      <AuthDetail user={user} refresh={userinfo.refresh} isShow={ShowAuth} onClose={() => setShowAuth(false)}></AuthDetail>
    </View>
  )
}

export default My